<template>
    <div>
        <el-input id="inputValue" type="text" placeholder="输入职位" @keyup.enter.native="getData(currentPage,tpageSize,lastNum)" size="small" v-model="input1" style="width:400px"></el-input>
        &nbsp;<el-button icon="search" type="primary" content="查询" class="button" @click="getData(currentPage,tpageSize,lastNum)" size="small">查询</el-button>
        <br><br>
    <el-table
        :data="tableData5"
        style="width: 100%;border-radius: 6px"
        :row-class-name="tableRowClassName">s
        <el-table-column type="expand">
            <template scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="职位名称">
                        <a :href="props.row.url" style="text-decoration:underline;--border-color-hover: yellow"><span>{{ props.row.title }} </span></a>
                    </el-form-item>
                    <el-form-item label="所属公司">
                        <span>{{ props.row.company }}</span>
                    </el-form-item>
                    <el-form-item label="职位 ID">
                        <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <el-form-item label="公司地址">
                        <span>{{ props.row.location }}</span>
                    </el-form-item>
                    <el-form-item label="薪资">
                        <span>{{ props.row.minoffer }}-{{ props.row.maxoffer }}元/月</span>
                    </el-form-item>
                    <el-form-item label="服务行业">
                        <span>{{ props.row.trades }}</span>
                    </el-form-item>
                    <el-form-item label="公司属性">
                        <span>{{ props.row.companytype }}</span>
                    </el-form-item>
                    <el-form-item label="公司规模">
                        <span>{{ props.row.companysize }}</span>
                    </el-form-item>
                    <el-form-item label="工作经验">
                        <span>{{ props.row.workExperience }}</span>
                    </el-form-item>
                    <el-form-item label="所在城市">
                        <span>{{ props.row.city }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>
        <el-table-column prop="id" label="编号" id="hh"></el-table-column>
        <el-table-column
            v-for="field in fieldMap" :prop="field.value" :label="field.label" :key="field.value">
        </el-table-column>
    </el-table>
    <div class="pagination">
        <span class="description">{{description}}</span>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change ="handleCurrentChange"
            :current-page="currentPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            :page-sizes="pageSizes"
            :page-size="tpageSize">
        </el-pagination>
    </div>
    </div>
</template>

<style>
    span{
        color: #f7ba2a;
    }
    a{
        color: #00d1b2;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    #hh{
        width: auto;
    }
</style>

<script>
    import $ from 'jquery'
    export default {
        //components: {ElButton},
        data() {
            return {
                fieldMap: [
                    {
                    value: "title",
                    label: "职位"
                }, {
                    value: "company",
                    label: "公司"
                }, {
                    value: "city",
                    label: "所在城市"
                }],
                tableData5:[{}],
                currentPage:1,
                pageSize: 10,
                tpageSize: 10,
                lastNum: 0,
                lastObject: null,
                input1: ''
            }
        },
        props:{
            rowClick:Function,
            tableData:Array,    //表格数据s
            columns:Array,      //表格列配置数据,{vlaue:对应数据对象中的属性，label：对应的是标题文字，className：对应的是列的样式类名}
            totalCount:Number,  //表格数据总数
            pageSizes:Array,    //决定每页显示的条数[10,15,20,25]
            checkBox:Boolean,  //决定是否显示复选框
            description:String, //分页脚底左侧的数据说明
            tableHeight:Number,  //分页列表的高度
            //pageSize:Number,
            sortChange:Function //用户点击列表头进行排序 { column, prop, order }

        },
        whtch:{
            pageSize:"changeSize"
        },
        created: this.tableData5/*function(){
            let url = 'http://localhost:8080/list';
            this.$http.get(url).then(function(data){
                this.tableData5 = data.body
                console.log(this.tableData5)
                this.tableLoading = false
            })
        }*/,
        //ready: function (){getData(1,this.tpageSize, 1 * this.tpageSize)},
        mounted(){
            this.getData(this.currentPage, this.tpageSize, (this.currentPage-1) * this.tpageSize)
        },
        methods: {
            getData(page, pageSize, lastNum){
                let obj = {}
                obj.page = page
                obj.size = pageSize

                obj.last = lastNum
                obj.title=""
                if(this.input1 != null){
                    obj.title = this.input1
                }
                console.log(obj.title)

                let json = JSON.stringify(obj)
                let url = BASE_URL + 'GetPageInfo'
                this.$http.post(url,json).then(function (data) {
                    //this.lastObject = JSON.parse(json)
                    this.tableData5 = data.data
                    //this.lastNum = this.tableData5[this.tableData5.length-1].id
                    //console.log(this.tableData5)
                }).catch(function (_error) {
                    this.$message({
                        message:'网络请求失败',
                        type:'error'
                    })
                    console.log(_error)
                    this.tableLoading = true;
                })
                return this.tableData5
            },
            tableRowClassName(row, index) {
                if (index % 2 == 1) {
                    return 'info-row';
                } else if (index % 2 == 0) {
                    return 'positive-row';
                }
                return '';
            },
           /* handleCurrentChange(val){
                this.cur_page = val;
                let pageNum = 15;

                alert(this.pre)

                this.getData();
            },*/
            changeSize:function(){
                this._data.tpageSize = this.pageSize
                alert(this._data.tpageSize)
            },
            handleSizeChange:function(size){
                // alert(size)
                this.tpageSize = size
                this.getData(this.currentPage,this.tpageSize,(this.currentPage-1) * this.tpageSize)
                //alert(this.tpageSize)
                this.$emit("pageSizeChange",size);
                //return size

            },
            handleCurrentChange:function(currentPage){
                this.currentPage = currentPage
                //alert(this.currentPage)
                this.getData(this.currentPage,this.tpageSize,(this.currentPage-1) * this.tpageSize)
                //alert(this.tpageSize)
                //alert(this.handleSizeChange(size))
                //alert(pageSize)
                this.$emit("currentPageChange",currentPage);
            },
            selectionChange:function(selections){
                //alert(selections)
                this.getData(this.currentPage,this.tpageSize,(this.currentPage-1) * this.tpageSize)
                this.$emit("selectionChange",selections);
            }
        }
    }
</script>
<style>
    .el-table .info-row {
        background: #c9e5f5;
        color: #00d1b2;
    }

    .el-table .positive-row {
        background: #e2f0e4;
        color: #2a88bd;
    }
</style>
